<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <style>
      .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 100px;
        row-gap: 50px;
      }

      h2 {
        margin-bottom: 1em;
      }
      
      iframe {
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div>
        <h2>Paintings by artists</h2>
        <iframe title="Embedded cell output" src="https://embed.deepnote.com/55753bb5-e753-4a6b-b981-9e104a4d4d4a/8e1ebec2-965c-4435-8844-6e6b056fefc0/18bb2ba02dfc4e5f8d2e07fa5f53f8ac?height=577" height="530" width="500"/>
      </div>
      <div>
        <h2>Paintings by mediums</h2>
        <iframe title="Embedded cell output" src="https://embed.deepnote.com/55753bb5-e753-4a6b-b981-9e104a4d4d4a/8e1ebec2-965c-4435-8844-6e6b056fefc0/00ace4c542e0491fbfacbb43ff29620d?height=577" height="530" width="500"/>
      </div>
      <div>
        <h2>Year created vs. Year acquired</h2>
        <iframe title="Embedded cell output" src="https://embed.deepnote.com/55753bb5-e753-4a6b-b981-9e104a4d4d4a/8e1ebec2-965c-4435-8844-6e6b056fefc0/20641dbf76db41debc24ec321f136c63?height=83" height="380" width="500"/>
      </div>
      <div>
        <h2>Paintings, tall and wide</h2>
        <iframe title="Embedded cell output" src="https://embed.deepnote.com/55753bb5-e753-4a6b-b981-9e104a4d4d4a/8e1ebec2-965c-4435-8844-6e6b056fefc0/432936ce5c33488f95a4698430ed90c9?height=83" height="380" width="500"/>
      </div>
      <div>
        <h2>Acquisitions by year</h2>
        <iframe title="Embedded cell output" src="https://embed.deepnote.com/55753bb5-e753-4a6b-b981-9e104a4d4d4a/8e1ebec2-965c-4435-8844-6e6b056fefc0/9308d51942eb4951af1315c181555c3c?height=83" height="380" width="500"/>
      </div>
      <div>
        <h2>Acquisitions by age</h2>
        <iframe title="Embedded cell output" src="https://embed.deepnote.com/55753bb5-e753-4a6b-b981-9e104a4d4d4a/8e1ebec2-965c-4435-8844-6e6b056fefc0/06444e3d3f81445881969166a7d78717?height=83" height="380" width="500"/>
      </div>
    </div>

    <script type="module">
      import createExampleWrapper from "@cube-dev/example-wrapper";

      createExampleWrapper({
        title: "Deepnote Data Notebook with Cube",
        text: `
          <p>This demo shows embedded blocks of a data notebook built with Deepnote.</p>
          <p>Explore the <a href="https://github.com/cube-js/cube.js/tree/master/examples/deepnote">source code</a>, check the <a href="https://deepnote.com/@igor-lukanin-adf1/Deepnote-Notebook-55753bb5-e753-4a6b-b981-9e104a4d4d4a">published notebook</a>, or follow the <a href="https://cube.dev/blog/deepnote-tutorial-jupyter-data-notebook">tutorial</a>.</p>
        `,
      });
    </script>
  </body>
</html>